<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Tooltip</title>
    <style>
        .container {
            max-width: 400px;
            margin: 30px auto;
            border-radius: 4px;
            box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.3);
            padding: 16px;
        }

        .carousel {
            position: relative;
            height: 200px;
        }

        .carousel .panels>a {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            text-decoration: none;
            opacity: 0;
            z-index: 0;
            transition: all .3s;
        }

        .carousel .panels>a.active {
            opacity: 1;
            z-index: 1;
        }

        .carousel .panels>a:nth-child(even) {
            background-color: #fff;
        }

        .carousel .panels>a:nth-child(odd) {
            background-color: #fff;
        }

        .carousel .arrow {
            position: absolute;
            top: 50%;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 50%;
            background: rgba(31, 45, 61, .11);
            opacity: 0;
            transition: all .3s;
            outline: none;
            cursor: pointer;
        }

        .carousel .arrow-pre {
            left: 10px;
            transform: translateX(-10px) translateY(-50%);
        }

        .carousel:hover .arrow-pre {
            transform: translateX(0) translateY(-50%);
            opacity: 1;
        }

        .carousel .arrow-next {
            right: 10px;
            transform: translateX(10px) translateY(-50%);
        }

        .carousel:hover .arrow-next {
            transform: translateX(0) translateY(-50%);
            opacity: 1;
        }


        .carousel .arrow::before {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            border-left: 1px solid #fff;
            border-top: 1px solid #fff;
            transform: rotate(-45deg);
        }

        .carousel .arrow.arrow-next::before {
            transform: rotate(135deg);
        }

        .carousel .indicators {
            position: absolute;
            z-index: 100;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .carousel .indicators>li {
            display: inline-block;
            padding: 5px 0;
            cursor: pointer;
        }

        .carousel .indicators>li::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            border-radius: 2px;
            background: #c0c4cc;
            transition: all .3s;
        }

        .carousel .indicators>li.active::before {
            background: #fff;
        }

        img {
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <div class="panels" id="panels">
            <a class="active" href="#0"><img id="img0"
                    src="https://img2.doubanio.com/view/photo/l/public/p2628053012.webp"></a>
            <!-- <a href="#1"><img src="https://wx2.sinaimg.cn/mw690/67e33037gy1gid8a2zdtuj23402c07wh.jpg"></a> -->
            <!-- <a href="#2"><img src="https://wx1.sinaimg.cn/mw690/67e33037gy1gid8a06c4ej23402c0u0x.jpg"></a> -->
            <!-- <a href="#3"><img src="https://wx2.sinaimg.cn/mw690/67e33037gy1gid8a5696nj22c0340qv5.jpg"></a> -->
        </div>
        <div class="arrows">
            <button class="arrow arrow-pre"></button>
            <button class="arrow arrow-next"></button>
        </div>
        <ul class="indicators" id="indicators">
            <li class="active"></li>
            <!-- <li></li> -->
            <!-- <li></li> -->
            <!-- <li></li> -->
        </ul>
    </div>


    <script>
        $(document).ready(function () {
            var rubbishpointID = GetQueryValue1("RubbishPointID");
            // $("button").click(function(){
            $.get("http://111.160.78.62:9943/GarbagePointsCSApi/BasicData/GetRubbishImageApi?ID=" + rubbishpointID, function (data, status) {
                // console.log("数据: " + data + "\n状态: " + status);
                // [{"name":"捕获.PNG","url":"http://111.160.78.62:9943/file/01900/居民/捕获.PNG"}]
                // data = [{"name":"捕获.PNG","url":"http://111.160.78.62:9943/file/01900/居民/捕获.PNG"},
                // {"name":"捕获.PNG","url":"https://wx2.sinaimg.cn/mw690/67e33037gy1gid8a2zdtuj23402c07wh.jpg"},
                // {"name":"捕获.PNG","url":"https://wx2.sinaimg.cn/mw690/67e33037gy1gid8a5696nj22c0340qv5.jpg"}]
                for (let i = 0; i < data.length; i++) {
                    if (i == 0) {
                        document.getElementById("img0").src = data[0].url
                    } else {
                        //添加 img
                        var img = document.createElement("img");
                        //设置 img 图片地址
                        img.src = data[i].url;
                        var a = document.createElement("a");
                        a.appendChild(img)
                        document.getElementById('panels').appendChild(a);
                        //添加 li
                        var li = document.createElement("li");
                        document.getElementById('indicators').appendChild(li);
                    }
                }
                createClass()
            });
        });
        function createClass() {
            class Carousel {
                constructor($root) {
                    this.$root = $root
                    this.$pre = $root.querySelector('.arrow-pre')
                    this.$next = $root.querySelector('.arrow-next')
                    this.$$indicators = $root.querySelectorAll('.indicators > li')
                    this.$$panels = $root.querySelectorAll('.panels > a')

                    this.bind()
                }

                bind() {
                    this.$pre.onclick = () => {
                        let index = this.getPreIndex()
                        this.setPage(index)
                        this.setIndicator(index)
                    }

                    this.$next.onclick = () => {
                        let index = this.getNextIndex()
                        this.setPage(index)
                        this.setIndicator(index)
                    }

                    this.$$indicators.forEach($indicator => $indicator.onclick = (e) => {
                        let index = [...this.$$indicators].indexOf(e.target)
                        this.setIndicator(index)
                        this.setPage(index)
                    })
                }

                getIndex() {
                    return [...this.$$indicators].indexOf(this.$root.querySelector('.indicators .active'))
                }

                getPreIndex() {
                    return (this.getIndex() - 1 + this.$$indicators.length) % this.$$indicators.length
                }

                getNextIndex() {
                    return (this.getIndex() + 1) % this.$$indicators.length
                }

                setPage(index) {
                    this.$$panels.forEach($panel => $panel.classList.remove('active'))
                    this.$$panels[index].classList.add('active')
                }

                setIndicator(index) {
                    this.$$indicators.forEach($indicator => $indicator.classList.remove('active'))
                    this.$$indicators[index].classList.add('active')
                }
            }

            let $$carousel = document.querySelectorAll('.carousel')
            $$carousel.forEach($root => new Carousel($root))

        }
        function GetQueryValue1(queryName) {
            var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            } else {
                return null;
            }
        }
    </script>


</body>

</html>